import { FC } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import tree from "@/assets/images/game/tree.png"
import water from "@/assets/images/game/water.png"
import ship from "@/assets/images/game/ship.png"
import box from "@/assets/images/game/box.png"
import "./index.scss"

interface IGamePlay {}

const GamePlay: FC<IGamePlay> = () => {


    const { t } = useTranslation()

	return (
		<div id="game-play">
			<div className='game-play-container'>
                <div className="game-play-title">
                    Early
                    <span className="game-play-title-ga"> ga</span>
                    meplay s
                    <span className="game-play-title-ta">ta</span>
                    ge 1
                </div>
                <div className="game-play-content">
                    <div className="game-play-watering">
                        <div className="left">
                        <p className="content-title">{t('gamePlay.water')}</p>
                            <p className="content-desc">{t('gamePlay.waterP1')}</p>
                            <p className="content-desc">{t('gamePlay.waterP2')}</p>
                            <p className="content-desc">{t('gamePlay.waterP3')}</p>
                            <p className="content-desc">{t('gamePlay.waterP4')}</p>
                            <p className="content-desc">{t('gamePlay.waterP5')}</p>
                        </div>
                        <div className="right-img-box">
                            <img className="right-img" src={tree} alt="" />
                            <p>{t('gamePlay.tree')}</p>
                        </div>
                    </div>
                    <div className="game-play-power">
                        <div className="left">
                            <p className="content-title">{t('gamePlay.power')}</p>
                            <div className="game-element-power flex">
                                <p>{t('gamePlay.powerP1')}</p>
                                <p>{t('gamePlay.powerP2')}</p>
                                <p>{t('gamePlay.powerP3')}</p>
                                <p>{t('gamePlay.powerP4')}</p>
                                <p>{t('gamePlay.powerP5')}</p>
                            </div>
                        </div>
                        <div className="right-img-box">
                            <img className="right-img" src={water} alt="" />
                            <p></p>
                        </div>
                    </div>
                    <div className="game-play-explorer">
                        <div className="left">
                            <p className="content-title">{t('gamePlay.explore')}</p>
                            <p className="content-desc">{t('gamePlay.explore1')}</p>
                            <p className="content-desc">{t('gamePlay.explore2')}</p>
                            <p className="content-desc">{t('gamePlay.explore3')}</p>
                            <p className="content-desc">{t('gamePlay.explore4')}</p>
                            <p className="content-desc">{t('gamePlay.explore5')}</p>
                        </div>
                        <div className="right-img-box">
                            <img className="right-img" src={ship} alt="" />
                            <p>{t('gamePlay.tree')}</p>
                        </div>
                    </div>
                    <div className="game-play-luck">
                        <div className="left">
                            <p className="content-title">{t('gamePlay.luck')}</p>
                            <p className="content-desc">{t('gamePlay.luck1')}</p>
                            <p className="content-desc">{t('gamePlay.luck2')}</p>
                            <p className="content-limit">{t('gamePlay.luck3')}</p>
                        </div>
                        <div className="right-img-box">
                            <img className="right-img" src={box} alt="" />
                            <p></p>
                        </div>
                    </div>
                </div>
			</div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(GamePlay)